<template>
	<publicPage>
		<view class="inspection">
			<view class="alertPos">
				<u-alert type="warning" :title="alertTitle" center> </u-alert>
			</view>
			<view class="fz-18 fw-7 tc pt-38 linh-50">服务项目订单</view>
			<!-- <image src="../../static/qrcode_for_gh_bb11b93a3dd9_258.png" style="width:200rpx;height:200rpx;" mode="widthFix" show-menu-by-longpress /> -->
			<view class="px-15">
				<view class="border1"></view>
				<view class="border2"></view>
			</view>
			<view class="disFlxJS px-15 linh-50">
				<view class="shrink0 pr-20">初步诊断</view>
				<view class="linh-22 py-10">{{ orderObj.initialDiagn || "-" }}</view>
			</view>
			<view class="disFlxJS px-15 linh-50 borderT">
				<view class="shrink0 pr-20">病情摘要</view>
				<view class="linh-22 py-10">{{ orderObj.diseaseDigest || "-" }}</view>
			</view>
			<view class="linh-44 px-15 disFlxJS borderT">
				<view class="pr-20">服务机构</view>
				<view class="linh-22">{{ orderObj.checkAgencyName }}</view>
			</view>

      <view v-if="orderObj.mailingInfo" class="pb-10">
        <view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">物流信息</view>
        <view class="disFlxJS linh-26 px-15 pt-10">
          <view class="shrink0 pr-50">物流方式</view>
          <view v-if="orderObj.mailingInfo.logisticType === 0 && orderObj.mailingInfo.mailingWay === 3">快递（邮寄给患者）</view>
          <view v-if="orderObj.mailingInfo.logisticType === 0 && orderObj.mailingInfo.mailingWay === 2">快递（邮寄给诊所）</view>
          <view v-if="orderObj.mailingInfo.logisticType === 1">用户自提</view>
          <view v-if="orderObj.mailingInfo.logisticType === 2">无需物流</view>
          <view v-if="orderObj.mailingInfo.logisticType === 3">同城配送</view>
        </view>
        <view v-if="orderObj.mailingInfo.recipientName" class="disFlxJS linh-26 px-15">
          <view class="shrink0 pr-50">收货人</view>
          <view>{{ orderObj.mailingInfo.recipientName }}</view>
        </view>
        <view v-if="orderObj.mailingInfo.recipientPhone" class="disFlxJS linh-26 px-15">
          <view class="shrink0 pr-50">手机号</view>
          <view>{{ orderObj.mailingInfo.recipientPhone }}</view>
        </view>
        <view v-if="orderObj.mailingInfo.mailingAddr" class="disFlxJS flexAlignTop linh-20 py-3 px-15 pb-10">
          <view class="shrink0 pr-50">地址</view>
          <view>{{ orderObj.mailingInfo.mailingAddr }}</view>
        </view>
      </view>

      <template v-if="orderObj.callType == 3">
        <view 
          v-for="(item, index) in orderObj.sheetList" 
          :key="index" 
          class="borderTop30">
          <view class="linh-44 px-15 borderB disFlxJS">
            <view class="shrink0 pr-10 disFlxAC">
              <text class="fz-16 color8 pr-10">{{ getServiceItemsTitle(item.serviceItems) }}</text>
              <u-tag v-if="item.serviceItems == 4 && (item.dictLabel === '中药饮片' || item.dictLabel === '中药颗粒' || item.dictLabel === '西药')" :text="item.dictLabel" type="warning" size="mini"></u-tag>
            </view>
            <view class="fz-12">
              <text class="px-2">{{ item.takeType === 1 ? '口服,' : (item.takeType === 2 ? '外用,' : '') }}</text>
              <text v-if="item.usageDose" class="px-2">每日{{ item.usageDose }}次,</text>
              <template v-if="item.serviceItems == 4 && item.prescriptNum" >
                <text class="px-2">每剂 <text class="colorY px-2">{{ item.itemNum }}</text> 项,</text>
                <text>共 <text class="colorY px-2">{{ item.prescriptNum }}</text> 剂</text>
              </template>
              <text v-else class="px-2">共 <text class="colorY px-2">{{ item.itemNum }}</text> 项</text>
            </view>
          </view>
          <view class="py-10">
            <view v-for="checkItem in item.checkItem" :key="checkItem.itemId" class="disFlxJS linh-26 px-15">
              <view>{{ checkItem.itemName }}</view>
              <view>{{ checkItem.specsNum }}{{ checkItem.unit || "项" }}</view>
            </view>
            <view v-if="item.subCost" class="borderT px-15 py-5 mt-10" style="text-align: right;">小计: <text class="colorY pl-5">{{ item.subCost }}云豆</text></view>
          </view>
        </view>
      </template>

      <view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">订单金额</view>
      <view class="disFlxJS linh-26 px-15 pt-10">
				<view class="shrink0 pr-50">订单金额</view>
				<view class="colorY">{{ orderObj.costOriginal || 0 }}云豆</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">优惠金额</view>
				<view class="colorY">{{ orderObj.costOriginal === orderObj.cost ? 0 : minus(orderObj.costOriginal, orderObj.cost) }}云豆</view>
			</view>
			<view class="disFlxJS linh-26 px-15 pb-10">
				<view class="shrink0 pr-50">{{orderObj.status == 0 || orderObj.status == 2 || orderObj.status == 3 ? '实付金额' : '需付金额'}}</view>
				<view class="colorY">{{ orderObj.cost || 0 }}云豆</view>
			</view>

      <view class="linh-44 px-15 fz-16 color8 borderTop30 borderB">订单信息</view>
      <view class="disFlxJS linh-26 px-15 pt-10">
        <view class="shrink0 pr-50">申请医生</view>
        <view>{{ orderObj.sponsor }}</view>
      </view>
      <view class="disFlxJS linh-26 px-15">
        <view class="shrink0 pr-50">申请机构</view>
        <view>{{ orderObj.companyName }}</view>
      </view>
      <view class="disFlxJS linh-26 px-15">
        <view class="shrink0 pr-50">消费人</view>
        <view>{{ orderObj.username }}</view>
      </view>
      <view class="disFlxJS linh-26 px-15">
        <view class="shrink0 pr-50">消费人电话</view>
        <view>{{ orderObj.userphone }}</view>
      </view>
      <view class="disFlxJS linh-26 px-15">
        <view class="shrink0 pr-50">订单编号</view>
        <view>{{ orderObj.orderNo }}</view>
      </view>
      <view class="disFlxJS linh-26 px-15 pb-10">
        <view class="shrink0 pr-50">订单时间</view>
        <view>{{ orderObj.createTime }}</view>
      </view>

			<view class="borderTop30 disFlxJS linh-50 px-15">
				<view>账户余额</view>
				<view class="color6">
					<text class="pr-5" style="color: #bb9313">{{ userInfo.balance || 0 }}</text>
					<text>云豆</text>
				</view>
			</view>
			<view class="borderTop30"></view>

			<view class="px-15 py-15 fexdBtn bgf">
				<u-button
					:disabled="countdownOver"
					type="primary"
					:text="'立即支付 (' + (orderObj.cost || 0) + '云豆)'"
					:customStyle="{
						fontSize: '32rpx',
						borderRadius: '20rpx',
						height: '88rpx',
					}"
					:throttleTime="500"
					@click="confimPlay"
				></u-button>
			</view>
		</view>

		<NoLogin
			:show="loginShow"
			tips="点击立即登录,登录后即可支付订单"
			@close="loginShow = false"
			@loginReturn="getOrder"
		/>
		<StatusPopup
			:show="czShow"
			type="error"
			btnText="去充值"
			@close="czShow = false"
			@confirm="goRecharge()"
		>
			<view class="pt-20">您的余额不足，请充值</view>
		</StatusPopup>
	</publicPage>
</template>

<script>
import { param2Obj } from "@/utils/common.js";
import orderApi from "@/api/order.js";
import StatusPopup from "../components/statusPopup.vue";
import NoLogin from "../components/noLogin.vue";
import { minus, plus, times } from "@/uview-ui/libs/function/digit.js";

export default {
	components: {
		StatusPopup,
		NoLogin,
	},
	computed: {
		// 用户信息
		userInfo() {
			return this.$store.state.userInfo;
		},
	},
	data() {
		return {
			orderid: "", // 订单号
			orderObj: {},
			alertTitle: "医生已为您开具申请单，请确认后，完成支付。",
			countdownOver: false, // 是否已付费
			loginShow: false,
			czShow: false,
		};
	},
	onLoad(query) {
		console.log(query, "扫码入参");

		const that = this;
		if (query.scene) {
			that.orderid = query.scene;
		} else {
			const q = decodeURIComponent(query.q); // 获取到二维码原始链接内容
			const options = param2Obj(q);
			that.orderid = options.id;
		}

		// 未登录
		if (!that.$store.state.userInfo.token || !that.$store.state.userInfo.id) {
			that.loginShow = true;
			return;
		}
		this.getOrder();
	},
	methods: {
		minus,
		times,
		// 获取订单详情
		getOrder() {
			orderApi.getOrderDetail({ id: this.orderid }).then((res) => {
				this.orderObj = res.data.info;

				this.$store.dispatch("sendCustomMessage", {
					type: "scanCode",
					toID: this.orderObj.expertId,
					title: "扫码成功",
				}); // 发送扫码成功

				// 判断是否付费
				if (this.orderObj.status === "0") {
					this.alertTitle = `订单已付费,请勿重新付费`;
					this.countdownOver = true;
					return;
				}
				// 余额不足
				if (this.userInfo.balance < this.orderObj.cost) {
					this.czShow = true;
				}

				console.log(this.orderObj, "查询订单详情");
			});
		},
		// 去充值
		goRecharge() {
			this.czShow = false;
			this.goPage(`/pagesC/recharge/index?czPlice=${this.orderObj.cost - this.userInfo.balance}`);
		},

		// 支付订单
		confimPlay() {
			const that = this;
			if (that.userInfo.balance < that.orderObj.cost) {
				that.czShow = true;
				return;
			}
			orderApi.callConfirmOrder({ orderid: that.orderid }).then((res) => {
				this.$store.dispatch("sendCustomMessage", {
					type: "consult",
					toID: that.orderObj.expertId,
					title: "服务项目单付费",
					meetingData: res.data,
				}); // 发送咨询付费
				uni.showToast({
					title: "支付成功",
					icon: "none",
					complete: () => {
						setTimeout(() => {
							uni.redirectTo({
								url: `/pagesC/reserveExp/success?writeCode=${res.data.checkCode}`,
							});
						}, 1500);
					},
				});
			});
		},
		getServiceItemsTitle(type) {
      switch (Number(type)) {
        case 3:
          return '检验检查'
        case 4:
          return '药品类'
        default:
          return '其他类'
      }
    },
		// 项目小计
		subtotal(item) {
			let priceTotal = 0;
			item.checkItem.forEach((v) => {
				const num = item.serviceItems == 4 ? item.prescriptNum * v.specsNum : v.specsNum;
				priceTotal = plus(priceTotal, times(v.checkPrice, num));
			});

			return priceTotal;
		},
	},
};
</script>

<style lang="scss" scoped>
.inspection {
	background-color: #ffffff;
	padding-bottom: 150rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
	.alertPos {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.border1 {
		border-top: solid 4rpx #747474;
	}
	.border2 {
		margin-top: 4px;
		border-top: solid 2rpx #747474;
	}
	.colorY {
		color: #bb9313;
	}
	.tr {
		text-align: right;
	}
	.fexdBtn {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}
}
</style>
